<template>
	<!-- 页面的主要内容容器 -->
	<view class="question">
		<!-- 用于滚动显示问题的区域，使用 scroll-view 组件 -->
		<scroll-view class="content" scroll-y="true">
			<view  class="item " :class="{reverse:item.role=='user'}" v-for="(item,index) in historys">
				<uni-icons style="border: 0;" :type="item.role=='user'?'qq':'help'"  color="orange" size="25"></uni-icons>
				<text>{{item.content}}</text>
			</view>
		</scroll-view>
		<!-- 提问输入区域 -->
		<view class="bottom">
			<uni-easyinput v-model="word" placeholder="请输入内容" />
			<button type="default" @tap="question" size="mini">提问</button>
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app"
		import {ref} from 'vue'
		import { CONFIG } from "../../utils/config"
		
		
		let model=ref({
			
			        "model": "moonshot-v1-8k",
			        "messages": [],
			        "temperature": 0.3
		})
		let historys=ref([])
		let word=ref("")
		async function question()
		{
			historys.value.push({
				"role":"user",
				"content":word.value
			})
			model.value.messages=historys.value
			let res = await uni.$post(CONFIG.kimi_url,model.value)
			historys.value.push(res.data.choices[0].message)
			console.log(historys.value);
		}
</script>

<style scoped lang="scss">
	.question{
		position: relative;
		height: calc(100vh - 97px);
		
		.content{
			height: calc(100vh - 140px);
			.item{
				display: flex;
				padding: 5px;
				text{
				    border: 1.5px solid #ff6666;
					border-radius: 5px;
					padding: 3px;
				}
			}
			// 生效的话生成的内容会反转
			.reverse{
				flex-direction: row-reverse;
			}
		}
		
		.bottom{
			padding: 3rpx 5rpx;
			width: 750rpx;
			box-shadow: 7rpx 5rpx 15rpx 7rpx rgb(150 148 148);
			display: flex;
			position: absolute;
			bottom: 0;
			button{
				margin-right:5px
			}
		}
	}
</style>
